<template>

    <div>
    <div style="margin-top: 10px">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="showAndTruckView">新增车辆</el-button>
    </div>
    <div style="margin-top: 10px">
        <!-- border stripe  该既要边框 也要斑马纹-->
        <el-table
                :data="trucks"
                border
                stripe
                size="mini"
                style="width: 100%">
            <el-table-column
                    prop="truckid"
                    label="车辆编号">
            </el-table-column>
            <el-table-column
                    prop="number"
                    label="车牌号">
            </el-table-column>
            <el-table-column
                    prop="buydate"
                    label="购买日期">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="车辆类型">
            </el-table-column>
            <el-table-column
                    prop="length"
                    label="车辆长度">
            </el-table-column>
            <el-table-column
                    prop="tonnage"
                    label="吨位">
            </el-table-column>

            <el-table-column
                    label="状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.state==1">承运中</el-tag>
                    <el-tag type="success" v-if="scope.row.state==2">空闲</el-tag> <!--"scope.row："查询到的 json数据-->
                </template>
            </el-table-column>

            <el-table-column
                    label="所属车队">
                <template slot-scope="scope">
                    <el-popover
                            placement="left"
                            title="车队信息"
                            width="200"
                            trigger="hover">
                        <div>
                            <table v-if="scope.row.truckTeam">  <!--如果拿到有 "truckTeam" 数据就展示 不然就是空目录-->
                                <tr>
                                    <td>车队编号</td>
                                    <td>{{scope.row.truckTeam.teamid}}</td>
                                </tr>
                                <tr>
                                    <td>车队名称</td>
                                    <td>{{scope.row.truckTeam.teamname}}</td>
                                </tr>
                                <tr>
                                    <td>车队leader</td>
                                    <td>{{scope.row.truckTeam.leader}}</td>
                                </tr>
                            </table>
                        </div>
                        <el-tag slot="reference">{{scope.row.truckTeam?scope.row.truckTeam.teamname:'未分配'}}</el-tag>
                    </el-popover>
                </template>
            </el-table-column>

            <el-table-column
                    prop="checkintime"
                    label="录入时间">
            </el-table-column>
            <el-table-column
                    prop="remark"
                    label="备注">
            </el-table-column>
            <el-table-column label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" @click="showEditTruckView(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteTruckById(scope.row)">删除</el-button> <!--删除属于危险操作 ：" type="danger""-->
                </template>
            </el-table-column>
        </el-table>

        <div style="display: flex;justify-content:flex-end"> <!--分页条居右-->
            <!--分页条-->
            <!--依次是 显示多少页，上一页，当前页，下一页，跳页，总记录数-->
            <el-pagination
                    background
                    @current-change="currentChange"
                    @size-change="sizeChange"
                    :page-sizes="[5,10,15,20]"
                    layout="sizes, prev, pager, next, jumper, ->, total, slot"
                    :total="total">
            </el-pagination>
        </div>
    </div>
        <el-dialog
                :title="title"
                :close-on-click-modal="false"
                :visible.sync="dialogVisible"
                width="50%">
            <div>
                <table>
                    <tr>
                        <td>车牌号</td>
                        <td>
                            <el-input v-model="truck.number" placeholder="请输入车牌号"></el-input>
                        </td>
                        <td>购买日期</td>
                        <td>
                            <el-date-picker
                                    v-model="truck.buydate"
                                    type="date"
                                    value-format="yyyy-MM-dd"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </td>
                    </tr>
                    <tr>
                        <td>车辆类型</td>
                        <td>
                            <el-input v-model="truck.type" placeholder="车辆类型"></el-input>
                        </td>
                        <td>车辆长度</td>
                        <td>
                            <el-input v-model="truck.length" placeholder="车辆长度"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>吨位</td>
                        <td>
                            <el-input v-model="truck.tonnage" placeholder="吨位"></el-input>
                        </td>
                        <td>车辆状态</td>
                        <td>
                            <el-radio-group v-model="truck.state">
                                <el-radio :label="1">承运中</el-radio>
                                <el-radio :label="2">空闲</el-radio>
                            </el-radio-group>
                        </td>
                    </tr>
                    <tr>
                        <td>所属车队</td>
                        <td>
                            <el-select v-model="truck.fkTeamid" placeholder="请选择">
                                <el-option
                                        v-for="item in tts"
                                        :key="item.teamid"
                                        :label="item.teamname"
                                        :value="item.teamid">
                                </el-option>
                            </el-select>
                        </td>
                        <td>备注</td>
                        <td>
                            <el-input v-model="truck.remark" placeholder="备注"></el-input>
                        </td>
                    </tr>
                </table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddTruck">确认</el-button>
             </span>
        </el-dialog>
 </div>
</template>

<script>
    import {getRequest} from "../../utils/api";
    import {postRequest} from "../../utils/api";
    import {putRequest} from "../../utils/api";
    import{deleteRequest} from "../../utils/api";

    export default {
        name: "TruckMana",
        data() { /* 声明变量*/
            return {
                dialogVisible: false,
                title: '', /*编辑框 名称变量*/
                total:0, /*分页的总数变量*/
                truck: {  /*声明新增车辆所需的变量*/
                    number: '',
                    buydate: '',
                    type: '',
                    length: '',
                    tonnage: '',
                    fkTeamid: '',
                    state: 2,
                    remark: ''
                },
                tts: [], /*所属车队变量为数组*/
                trucks: [],
                page:1,
                size:10

            }
        },
        mounted() {  /*调用拿到 查到的数据的方法  " initTrucks()"*/
            this.initTrucks();/*拿到新值 表格数据自动刷新*/

        },
        methods: { /*定义方法*/
                    /* val: 当前页*/
            sizeChange(val) {
                this.size = val;
                this.initTrucks();
            },
            currentChange(val){
                this.page = val;
                this.initTrucks();
            },

            deleteTruckById(data) {
                this.$confirm('此操作将删除该车辆, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteRequest('/truck/'+data.truckid).then(resp=>{
                        if (resp) {
                            this.initTrucks();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            showEditTruckView(data) {  /*修改信息操作*/
                this.title = "编辑车辆";
                this.truck = data; /*拿到 后端的数据*/
                this.dialogVisible = true; /*编辑框显示出来*/
                this.initTrucks();
                this.initTts();

            },

            doAddTruck() {  /*数据添加操作*/
                if (this.truck.truckid) {  /*判断 是添加操作 还是编辑操作*/
                    //更新
                    putRequest('/truck/', this.truck).then(resp => {
                        if (resp) {   /*如果有id 存在 就是 修改操作*/
                            this.dialogVisible = false;
                           this.initTrucks();
                        }
                    })
                } else {
                    postRequest("/truck/", this.truck).then(resp => {
                        if (resp) {     /*拿到请求数据*/

                            this.dialogVisible = false;
                            this.initTrucks();/*拿到新值 表格数据自动刷新*/
                        }
                    });
                }
            },
            initTts() {  /*所属车队方法*/
                getRequest('/truck/truckteam').then(resp => {
                    if (resp) { /*拿到后台车队信息*/
                        this.tts = resp;
                    }
                })
            },

            showAndTruckView() { /*添加车辆操作事件*/
                this.title = "添加车辆"
                this.dialogVisible = true;
                this.initTts();
                this.truck = {  /*添加完成后 输入框数据清空*/
                    number: '',
                    buydate: '',
                    type: '',
                    length: '',
                    tonnage: '',
                    fkTeamid: '',
                    state: 2,
                    remark: ''
                }
            },

            initTrucks() {
                getRequest('/truck/?page=' + this.page + '&size=' + this.size).then(resp => {
                    if (resp) {
                        this.trucks = resp.data;
                        this.total=resp.total;

                    }
                })
            }
        }
    }

</script>

<style scoped>

</style>